﻿@page "/table"
@attribute [TabItemOption(Text = "Table")]

<PageTitle>Table</PageTitle>

<div class="col-12 col-sm-6">
    <SelectTable TItem="Foo"
                 GetTextCallback="t=>t.Name"
                 OnQueryAsync="OnQueryAsync"
                 @bind-Value=Selected>
        <TableColumns Context="st">
            <TableColumn @bind-Field=st.Name></TableColumn>
        </TableColumns>
    </SelectTable>
</div>
<Divider>对照(请使用表格中操作界面中的编辑下拉选择)</Divider>


<Table TItem="Foo" class="table-demo"
       IsPagination="true" PageItemsSource="PageItemsSource"
       IsStriped="true" IsBordered="true" IsMultipleSelect="true"
       ShowSkeleton="true" ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true"
       OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync" OnDeleteAsync="OnDeleteAsync">
    <TableColumns>
        <TableColumn @bind-Field=context.Name>
            <EditTemplate Context="v">
                <div class="col-12 col-sm-6">
                    <SelectTable TItem="Foo"
                                 GetTextCallback="t=>t.Name"
                                 OnQueryAsync="OnQueryAsync"
                                 @bind-Value=Selected>
                        <TableColumns Context="st">
                            <TableColumn @bind-Field=st.Name></TableColumn>
                        </TableColumns>
                    </SelectTable>
                </div>
            </EditTemplate>
        </TableColumn>
    </TableColumns>
</Table>



@code {
    private Foo Selected { get; set; }
}
